<template>
    <div class="message">
      <slot></slot>
      <div class="container">
          <msg-item v-on:showDetail="isShowDetail"/>
          <remind-form />
          <msg-content v-bind:isShow="isShow" v-on:close="isShowDetail"/>
      </div>
    </div>
</template>

<script>
import MsgItem from '../components/MsgItem.vue'
import MsgContent from '../components/MsgContent.vue'
import RemindForm from '../components/RemindForm.vue'

export default {
  name: 'message',
  data: function () {
    return {
      isShow: false
    }
  },
  components: {
    'msg-item': MsgItem,
    'msg-content': MsgContent,
    'remind-form': RemindForm
  },
  methods: {
    isShowDetail: function () {
      this.isShow = !this.isShow
    }
  }
}
</script>

<style scoped>
.message .container {
  padding: 0.47rem 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>
